<script
	lang="ts"
	setup
>
import { userAuditSwitchPost, userListGet, userUpdateStatusPost } from '@/api'
import FullHeightTable from '@/components/FullHeightTable.vue'
import SearchInput from '@/components/SearchInput.vue'
import SubHeader from '@/components/SubHeader.vue'
import { PUBLISH_STATUS, RELEASE_AUDIT_STATUS, TRADE_STATUS, USER_STATUS } from '@/const/user';
import { useRenderAction } from '@/hooks/useRenderActions'
import { userColumns } from '@/tableColumns/user'
import UserDetail from '@/views/console/user/components/UserDetail.vue'
import { type DataTableProps, NSwitch } from 'naive-ui'
import { h, ref } from 'vue'

const table = ref()
const showDetail = ref(false)
const userId = ref('')
const filterPrams = ref({
	keyword: ''
})

const tableProps = ref<DataTableProps>({
	scrollX: 1300,
	rowKey: (item) => item.id,
	columns: (userColumns || []).concat([
		{
			title: '免审核发布',
			key: 'auditSwitch',
			width: 80,
			render: (item, index) => {
				return h(NSwitch, {
					value: item.auditSwitch,
					checkedValue: RELEASE_AUDIT_STATUS.NO,
					uncheckedValue: RELEASE_AUDIT_STATUS.YES,
					loading: item.loading,
					onUpdateValue: value => updateAuditSwitch(index, item, value),
					railStyle: () => ({ width: '50px' })
				})
			}
		},
		{
			title: '禁止发布',
			key: 'publishSwitch',
			width: 80,
			render: (item, index) => {
				return h(NSwitch, {
					value: item.prohibitPublish,
					checkedValue: PUBLISH_STATUS.YES,
					uncheckedValue: PUBLISH_STATUS.NO,
					loading: item.prohibitPublishLoading,
					onUpdateValue: value => updateUserStatusSwitch(index, item, value, 'prohibitPublish'),
					railStyle: () => ({ width: '50px' })
				})
			}
		},
		{
			title: '禁止交易',
			key: 'tradeSwitch',
			width: 80,
			render: (item, index) => {
				return h(NSwitch, {
					value: item.prohibitTrade,
					checkedValue: TRADE_STATUS.YES,
					uncheckedValue: TRADE_STATUS.NO,
					loading: item.prohibitTradeLoading,
					onUpdateValue: value => updateUserStatusSwitch(index, item, value, 'prohibitTrade'),
					railStyle: () => ({ width: '50px' })
				})
			}
		},
		{
			title: '禁止登录',
			key: 'tradeSwitch',
			width: 80,
			render: (item, index) => {
				return h(NSwitch, {
					value: item.status,
					checkedValue: USER_STATUS.DISABLE,
					uncheckedValue: USER_STATUS.ENABLE,
					loading: item.statusLoading,
					onUpdateValue: value => updateUserStatusSwitch(index, item, value, 'status'),
					railStyle: () => ({ width: '50px' })
				})
			}
		},
		{
			title: '操作',
			key: 'actions',
			width: 100,
			fixed: 'right',
			align: 'center',
			render: item => useRenderAction([
				{
					label: '详情',
					type: 'default',
					round: true,
					onClick: () => onShowDetail(item.id)
				},
			])
		}
	])
})

function onShowDetail(id: string) {
	showDetail.value = true
	userId.value = id
}

async function updateAuditSwitch(index: number, item: any, value: number) {
	if (item.userMargin?.amount && item.userMargin?.amount > 1) {
		table.value.updateData(index, { loading: true })
		const { code } = await userAuditSwitchPost({
			auditSwitch: value,
			userId: item.id
		})
		if (code === 200) {
			table.value.updateData(index, { loading: false, auditSwitch: value })
		}
	} else {
		window.$message.error('该用户未缴纳保证金或保证金不足，不能开启免审核')
	}
}

async function updateUserStatusSwitch(index: number, item: any, value: number, action: string) {
	table.value.updateData(index, { [action + 'Loading']: true })
	const { code } = await userUpdateStatusPost({
		action: action,
		userId: item.id,
		status: value
	})
	if (code === 200) {
		table.value.updateData(index, { [action + 'Loading']: false, [action]: value })
	}
}
</script>

<template>
	<n-layout>
		<sub-header>
			<template #right>
				<SearchInput
					v-model:value="filterPrams.keyword"
					placeholder="手机，邮箱，昵称"
					width="210"
				/>
			</template>
		</sub-header>
		<n-layout class="content">
			<FullHeightTable
				ref="table"
				:params="filterPrams"
				:table-props="tableProps"
				:table-request="userListGet"
			/>
		</n-layout>
		<UserDetail
			v-model:show="showDetail"
			:id="userId"
		/>
	</n-layout>
</template>
<style
	lang="less"
	scoped
>
.content {
	padding: 0 20px 20px 20px;

	header {
		padding: 20px 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}
</style>
